<template>
  <div class="prdp-outer">
    <div class="prdp-main">
      <!-- 头部标题栏 -->
      <div class="prdp-title-bar">
        <h2>张力设定表</h2>
      </div>

      <!-- 标签页 -->
      <div class="prdp-search-container">
        <el-tabs v-model="activeTab" class="rule-tabs" @tab-change="handleTabChange">
          <el-tab-pane label="规格静态张力设定表" name="specification" />
          <el-tab-pane label="历史卷实际平均张力表" name="history" />
        </el-tabs>
      </div>

      <!-- 表格 -->
      <div class="prdp-table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center', color: '#333' }"
          :scrollbar-always-on="true"
        >
          <el-table-column prop="no" label="序号" min-width="60" fixed />
          <el-table-column prop="ypClass" label="钢种分档" min-width="120" />
          <el-table-column prop="exthkClass" label="厚度分档[mm]" min-width="120" />
          <el-table-column prop="exwidthClass" label="宽度分档[mm]" min-width="120" />
          <el-table-column prop="preheatTensionAve" label="预热段张力" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.preheatTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="heat1TensionAve" label="加热1段张力" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.heat1TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="heat2TensionAve" label="加热2段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.heat2TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="soakTensionAve" label="均热段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.soakTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="rcsTensionAve" label="快冷段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.rcsTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="stage1TensionAve" label="时效1段张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.stage1TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="stage2TensionAve" label="时效2段张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.stage2TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="stage3TensionAve" label="时效3段张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.stage3TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="slowTensionAve" label="缓冷段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.slowTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="finalTensionAve" label="终冷段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.finalTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="cleanTensionAve" label="清洗段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.cleanTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="enlooperTensionAve" label="入口活套张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.enlooperTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="midlooperTensionAve" label="中间活套张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.midlooperTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="exlooperTensionAve" label="出口活套张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.exlooperTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="por1TensionAve" label="1开卷机张力均值" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.por1TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="por2TensionAve" label="2开卷机张力均值" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.por2TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="enspmTensionAve" label="平整机入口张力" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.enspmTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="exspmTensionAve" label="平整机出口张力" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.exspmTensionAve) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { zlgdhApi } from '/@/api/zlgdh/zlgdh2150';

  const activeTab = ref('specification');

  interface TensionData {
    no?: number;
    ypClass?: string;
    exthkClass?: string;
    exwidthClass?: string;
    preheatTensionAve?: string;
    heat1TensionAve?: string;
    heat2TensionAve?: string;
    soakTensionAve?: string;
    rcsTensionAve?: string;
    stage1TensionAve?: string;
    stage2TensionAve?: string;
    stage3TensionAve?: string;
    slowTensionAve?: string;
    finalTensionAve?: string;
    cleanTensionAve?: string;
    enlooperTensionAve?: string;
    midlooperTensionAve?: string;
    exlooperTensionAve?: string;
    por1TensionAve?: string;
    por2TensionAve?: string;
    enspmTensionAve?: string;
    exspmTensionAve?: string;
  }

  const tableData = ref<TensionData[]>([]);

  // 格式化数字，保留两位小数
  const formatNumber = (value: any): string => {
    if (value === null || value === undefined || value === '') {
      return '';
    }
    const num = parseFloat(value);
    if (isNaN(num)) {
      return value;
    }
    return num.toFixed(2);
  };

  // 页面加载时获取数据
  onMounted(() => {
    loadTensionData();
  });

  // 加载张力设定表数据
  const loadTensionData = async () => {
    try {
      console.log('开始加载张力设定表数据...');

      const response = await zlgdhApi.getTensionData({});
      console.log('张力设定表数据:', response);

      // 处理接口返回的数据
      if (response && response.data) {
        const data = response.data.data;
        // 如果返回的是数组，直接使用；如果是对象，需要进一步处理
        if (Array.isArray(data)) {
          tableData.value = data.map((item: any, index: number) => ({
            no: index + 1,
            ...item,
          }));
        } else if (data.list && Array.isArray(data.list)) {
          tableData.value = data.list.map((item: any, index: number) => ({
            no: index + 1,
            ...item,
          }));
        } else {
          console.log('数据结构:', data);
          tableData.value = [];
        }
      }
    } catch (error) {
      console.error('加载张力设定表数据失败:', error);
      tableData.value = [];
    }
  };

  // 监听标签页切换
  const handleTabChange = (tabName: string) => {
    activeTab.value = tabName;
    loadTensionData();
  };
</script>

<style scoped>
  .prdp-outer {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, #eaf1fb 0%, #2c69e8 100%);
    overflow: hidden;
  }
  .prdp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
  }
  .prdp-table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 200px);
    overflow: hidden;
  }
  .el-table {
    flex: 1;
    height: 100% !important;
    min-height: 0;
    max-height: calc(100vh - 200px);
  }
  .el-table__body-wrapper {
    overflow-x: auto;
    overflow-y: auto;
  }
  .el-table__header-wrapper {
    overflow-x: auto;
  }
  .prdp-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .prdp-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .prdp-title-bar h2 {
    margin: 0;
    color: #333;
  }

  .prdp-status-indicators {
    display: flex;
    gap: 20px;
  }

  .prdp-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .prdp-status-text {
    color: #333;
    font-size: 14px;
  }

  .prdp-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #67c23a;
    display: inline-block;
  }

  .prdp-search-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }

  .prdp-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  /* 等级指示器样式 */
  .prdp-grade-indicator {
    display: flex;
    justify-content: center;
  }

  .prdp-grade-a {
    color: #67c23a;
    font-weight: bold;
  }

  .prdp-grade-b {
    color: #409eff;
    font-weight: bold;
  }

  .prdp-grade-c {
    color: #e6a23c;
    font-weight: bold;
  }

  .prdp-grade-d {
    color: #f56c6c;
    font-weight: bold;
  }

  .prdp-rate-indicator {
    text-align: center;
  }
  .rule-tabs {
    margin-bottom: 0;
  }
</style>
